import React from 'react';
import { history } from 'umi'
import { PageContainer } from '@/molecules';
import authHelper from '@/utils/auth/helper';
import { LIST_TYPE } from '../constants';
import Trial from './Trial';
// import Trial from './TrialTest';

const { checkCode } = authHelper;

const tabList = [
    {
        key: '1',
        tab: '试用中',
        code: 'office:regular:being',
        component: <Trial type={LIST_TYPE.TRIAL} key={LIST_TYPE.TRIAL} />
    },
    {
        key: '2',
        tab: '待转正',
        code: 'office:regular:wait',
        component: <Trial type={LIST_TYPE.INFORMAL} key={LIST_TYPE.INFORMAL} />
    },
    {
        key: '3',
        tab: '历史记录',
        code: 'office:regular:history',
        component: <Trial type={LIST_TYPE.RECORD} key={LIST_TYPE.RECORD} />
    }
];

const InformalList = ({ location }) => {
    const { query } = location;
    const filterList = tabList.filter(item => checkCode(item.code)) || [];
    const [activeKey, setActiveKey] = React.useState(query?.activeKey || filterList[0]?.key || '1');
    const [savedQuery, setSavedQuery] = React.useState(null);

    const handleTabChange = key => {
        setActiveKey(key);
        history.push({ query: { ...savedQuery?.[key], activeKey: key } });
    };

    React.useEffect(() => {
        const key = query?.activeKey || filterList[0]?.key || '1';
        setActiveKey(key);
        setSavedQuery({
            ...savedQuery,
            [key]: query
        });
    }, [query]);

    React.useEffect(() => {
        if (filterList && filterList.length > 0) {
            if (!filterList.find(item => item.key === activeKey)) {
                setActiveKey(filterList[0]?.key || '');
            }
        }
    }, [JSON.stringify(filterList)]);

    return (
        <PageContainer tabList={filterList} activeTabKey={activeKey} onTabChange={handleTabChange}>
            {filterList?.find(item => item.key === activeKey)?.component}
        </PageContainer>
    );
};

export default InformalList;
